<template>
  <footer>
    <router-link
      class="item"
      v-for="item in barList"
      :key="item.title"
      :to="'/home' + item.url"
    >
      <span class="iconfont" :class="'icon-' + item.icon"></span>
      <span>{{ item.title }}</span>
    </router-link>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      barList: [
        {
          title: "电影/影院",
          icon: "dianying",
          url: "/movies",
        },
        {
          title: "视频",
          icon: "shipin",
          url: "/videos",
        },
        {
          title: "小视频",
          icon: "xiaoshipinyingshi48",
          url: "/mini",
        },
        {
          title: "演出",
          icon: "yanchu-xianxing2-0",
          url: "/show",
        },
        {
          title: "我的",
          icon: "wode",
          url: "/mine",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
footer {
  position: fixed;
  width: 100%;
  height: 50px;
  left: 0;
  bottom: 0;
  border-top: 1px solid @border-color;
  background-color: #fff;
  display: flex;
  font-size: @xs-font;

  .item {
    flex: 1;
    .center();
    display: flex;
    flex-direction: column;

    .iconfont {
      font-size: @xl-font;
    }
  }
}

.router-link-active {
  color: @theme-color;
}
</style>
